<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>外边距重叠</title>
        <style type="text/css">
            .outer { margin: 50px ; border: 1px solid red ; }
            .inner { background-color: #FFFF00 ; height: 100px ; }
            .first { margin: 50px 100px ; }
            .second { margin: 100px ;  }
            .third { margin-top: -50px ; margin-bottom: 50px ; margin-left: 100px ; margin-right: 100px ; }
        </style>
    </head>
    <body>

        <div class="outer">
            <div class="inner first">1</div>
            <div class="inner second">2</div>
            <div class="inner third">3</div>
        </div>
        
    </body>
</html>